<template>
  <right-template :title="componentData.title" :tabName="componentData.tabName">
    <el-form class="right-bg margin-bottom-10">
      <p class="margin-16">背景图片</p>
      <add-img-con :url="commonAttr.bgUrl" comAttr="commonAttr" picAttr="bgUrl" :isCrop='false' :height="100" class="margin-left-right-16"></add-img-con>
      <dropdown-normal v-model="commonAttr.bgPositionRepeatType" :valLists="BG_POSITION_REPEAT_TYPES" label="背景图片位置" @change="onChangeAttr"></dropdown-normal>
      <color-normal v-model="commonAttr.backgroundColor" label="背景颜色" :format="'rgb'" @change="onChangeAttr"></color-normal>
      <switch-normal v-model="commonAttr.isFullScreen" label="全屏" @change="onChangeAttr"></switch-normal>
      <switch-normal v-model="commonAttr.isTouchmove" label="滑动事件" @change="onChangeAttr"></switch-normal>
      <switch-normal v-model="commonAttr.isBlank" label="空的容器" @change="onChangeAttr"></switch-normal>
      <textarea-normal label="雪碧图属性" placeholder="{url,width,height,duration,steps,currentStep,isLoop}" v-model="commonAttr.spriteSheetParams" @change="onChangeAttr"></textarea-normal>
    </el-form>
  </right-template>
</template>

<script setup lang="ts">
import { useWebComponentStore } from '@/store/web/component'
import { BG_POSITION_REPEAT_TYPES } from '@/const/web/'

const useWebComponent = useWebComponentStore()

let componentData_: any
const componentData = computed(() => {
  componentData_ = useWebComponent.currentComponentData
  return componentData_
})
let commonAttr_: any
const commonAttr = computed(() => {
  commonAttr_ = useWebComponent.currentComponentData!.commonAttr
  return commonAttr_
})
const onChangeAttr = () => {
  // useWebComponent.updateCurrentComponentData({ commonAttr: commonAttr_ })
}
</script>

